<template>
  <div>
    <el-dialog title="新增栏目" :visible.sync="dialogVisible" width="40%" @close="handleClose()">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm">
        <el-form-item label="栏目名称" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="父级" prop="parentId">
          <el-cascader :options="dataTree" :props="selectCate" :show-all-levels="false" clearable filterable
            ref="cascader" v-model="ruleForm.parentId" @change="selectValue"></el-cascader>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input-number v-model.number="ruleForm.sort" :min="0" label="描述文字"></el-input-number>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="ruleForm.status">
            <el-radio label="1">启用</el-radio>
            <el-radio label="0">停用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否展示此栏目" prop="isDisplay">
          <el-radio-group v-model="ruleForm.isDisplay">
            <el-radio label="0">是</el-radio>
            <el-radio label="1">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getColumnTree, getColumnAdd } from "@/request/api/new";
export default {
  data() {
    // 设置序号为整数包括0
    var checkInt = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入序号"));
      } else {
        var pwdRegex = new RegExp("^(0|[1-9][0-9]*|-[1-9][0-9]*)$");
        if (!pwdRegex.test(value)) {
          callback(new Error("请输入整数"));
        } else {
          callback();
        }
      }
    };
    return {
      dialogVisible: false,
      ruleForm: {
        name: "", //栏目名称
        parentId: "", //父类ID
        sort: 1,
        status: "1", //0停用，1启用
        isDisplay: "0", //是否展示此栏目：0是，1否
      },
      rules: {
        name: [{ required: true, message: "请输入栏目名称", trigger: "blur" }],
        sort: [{ required: true, validator: checkInt, trigger: "change" }],
        parentId: [
          { required: true, message: "请选择父栏目", trigger: "change" },
        ],
      },
      dataTree: [],
      selectCate: {
        checkStrictly: true,
        label: "name",
        children: "children",
        value: "id",
        getCheckedNodes: true,
        expandTrigger: "hover",
      },
    };
  },
  methods: {
    open() {
      this.dialogVisible = true;
      this.getTypeTree();
    },
    // 行业分类
    selectValue(val) {
      this.$refs.cascader.dropDownVisible = false;
    },
    // 获取产品类型树
    getTypeTree() {
      getColumnTree().then((res) => {
        if (res.data.code === 200) {
          this.loading = false;
          this.dataTree = res.data.result;
        }
      });
    },
    handleClose() {
      this.$emit('getTypeTree')
      this.$refs.ruleForm.resetFields();
    },
    handleSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          let nodesInfo = this.$refs["cascader"].getCheckedNodes();
          if (nodesInfo.length !== 0) {
            this.ruleForm.parentId = nodesInfo[0].value;
            let children = nodesInfo[0].children
            if (children.length === 0) {
              this.$confirm("您所选父级栏目下相关资讯将转移至新增子栏目!", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
              }).then(() => {
                this.getResult()
              })
            } else {
              this.getResult()
            }
          }
        }
      });
    },
    // 新增接口
    getResult() {
      getColumnAdd(this.ruleForm).then((res) => {
        if (res.data.code === 200) {
          this.$message({
            message: res.data.message,
            type: "success",
          });
          this.dialogVisible = false;
        } else {
          this.$message.error(res.data.message);
        }
      });
    }
  },
};
</script>
<style lang="less" scoped></style>
